<template>
  <a-form layout="vertical" class="space-y-6">
    <a-form-item label="起始数字" class="mb-0">
      <a-input-number
        v-model:value="startNumber"
        :min="0"
        :disabled="isProcessing"
        class="w-full"
        :class="{ 'opacity-50': isProcessing }"
      />
    </a-form-item>

    <a-form-item label="选择文件夹" class="mb-0">
      <a-space wrap>
        <a-button type="primary" :loading="isProcessing" class="min-w-120px" @click="selectFolder">
          <template #icon>
            <folder-outlined />
          </template>
          选择文件夹
        </a-button>
        <a-tag v-if="selectedFolder" color="blue" class="max-w-full truncate">
          {{ selectedFolder }}
        </a-tag>
      </a-space>
    </a-form-item>

    <a-form-item class="mb-0">
      <a-button
        type="primary"
        :loading="isProcessing"
        :disabled="!selectedFolder || !startNumber || isProcessing"
        block
        class="h-40px"
        @click="renameImages"
      >
        <template #icon>
          <sync-outlined :spin="isProcessing" />
        </template>
        {{ isProcessing ? '处理中...' : '开始重命名' }}
      </a-button>
    </a-form-item>
  </a-form>

  <a-alert
    v-if="message"
    :message="message"
    :type="messageType === 'success' ? 'success' : 'error'"
    show-icon
    class="mt-4"
    :class="{
      'animate-fade-in': message,
      'animate-fade-out': !message
    }"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { FolderOutlined, SyncOutlined } from '@ant-design/icons-vue'

const startNumber = ref<number>(0)
const selectedFolder = ref<string>('')
const message = ref<string>('')
const messageType = ref<'success' | 'error'>('success')
const isProcessing = ref<boolean>(false)

const selectFolder = async () => {
  try {
    const result = await window.api.showOpenDialog({
      properties: ['openDirectory']
    })

    if (!result.canceled && result.filePaths.length > 0) {
      selectedFolder.value = result.filePaths[0]
      message.value = '' // 清除之前的消息
    }
  } catch (error) {
    console.error('选择文件夹时出错:', error)
    message.value = '选择文件夹时出错'
    messageType.value = 'error'
  }
}

const renameImages = async () => {
  if (!selectedFolder.value || !startNumber.value || isProcessing.value) return

  isProcessing.value = true
  message.value = ''

  try {
    const result = await window.api.renameImages(selectedFolder.value, startNumber.value)

    message.value = result.message
    messageType.value = result.success ? 'success' : 'error'

    if (result.success) {
      // 成功后清空输入
      selectedFolder.value = ''
      startNumber.value = 0
    }
  } catch (error) {
    console.error('重命名操作失败:', error)
    message.value = '重命名过程中出错'
    messageType.value = 'error'
  } finally {
    isProcessing.value = false
  }
}
</script>

<style>
.animate-fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

.animate-fade-out {
  animation: fadeOut 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}
</style>
